<!--
-->
<template>
    <vxe-modal v-model="visible" :height="layout.modalHeight(600)" :min-width="layout.modalMinWidth(600)" :position="{top: '60px'}" :title="title" :width="layout.modalWidth(800)" destroy-on-close resize show-footer show-maximize @close="cancelClick">
        <el-form ref="ELForm" v-loading="isLoading" :model="state.model" :rules="rules" :validate-on-rule-change="false" class="ELForm" inline label-width="120px">
            <el-form-item :style="layout.col1" label="电脑名称" prop="name">
                <el-input v-model="state.model.name" />
            </el-form-item>
            <el-form-item :style="layout.col2" label="程序" prop="programCode">
                <el-select v-model="state.model.programCode" style="width: 100%">
                    <el-option v-for="item in state.programList" :key="item.id" :label="item.name" :value="item.code" />
                </el-select>
            </el-form-item>
            <el-form-item :style="layout.col2" label="设备" prop="deviceId">
                <el-select v-model="state.model.deviceId" style="width: 100%">
                    <el-option v-for="item in state.deviceList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item :style="layout.col2" label="客户端类型" prop="programType">
                <el-select v-model="state.model.programType" style="width: 100%">
                    <el-option :value="1" label="单样品" />
                    <el-option :value="2" label="多样品" />
                    <el-option :value="3" label="水泥版" />
                </el-select>
            </el-form-item>
            <el-form-item :style="layout.col2" label="探测器类型" prop="xrfType">
                <g-dict-select v-model="state.model.xrfType" code="XrfType" />
            </el-form-item>
            <el-form-item :style="layout.col2" label="是否调试电脑" prop="isDebugPC">
                <el-select v-model="state.model.isDebugPC" style="width: 100%">
                    <el-option :value="false" label="否" />
                    <el-option :value="true" label="是" />
                </el-select>
            </el-form-item>
            <el-form-item v-if="state.mac" :style="layout.col1" label="Mac地址" prop="mac">
                <el-input v-model="state.model.mac" style="width: calc(100% - 60px)" />
                <el-button plain type="primary" @click="setMac">获取</el-button>
            </el-form-item>
            <el-form-item v-else :style="layout.col2" label="Mac地址" prop="mac">
                <el-input v-model="state.model.mac" />
            </el-form-item>
            <el-form-item :style="layout.col1" label="描述" prop="description">
                <el-input v-model="state.model.description" type="textarea" />
            </el-form-item>
            <el-form-item :style="layout.col1" label="打印模板" prop="jsonReport">
                <template v-if="state.model.jsonReport">
                    <el-button size="small" type="primary" @click="previewTemplate">
                        <b-icon name="bi-eye" size="14" style="margin-right: 4px" />
                        查看
                    </el-button>
                    <el-button plain size="small" type="primary" @click="setTemplate">
                        <b-icon name="bi-repeat" size="14" style="margin-right: 4px" />
                        更换
                    </el-button>
                </template>
                <template v-else>
                    <el-alert :closable="false" show-icon title="" type="warning">
                        <template #title>
                            <span style="margin-right: 10px">当前主机未设置打印模板</span>
                            <el-button plain size="small" type="primary" @click="setTemplate">
                                <b-icon name="bi-wrench" size="12" style="margin-right: 4px" />
                                设置模板
                            </el-button>
                        </template>

                    </el-alert>
                </template>
            </el-form-item>
        </el-form>
        <PrintTemplate ref="printTemplate" />
        <PreviewPrintTemplate ref="previewPrintTemplate" />
        <template #footer>
            <el-button @click="cancelClick">取消</el-button>
            <el-button :loading="isSubmitting" type="primary" @click="beforeSubmit">
                确定
            </el-button>
        </template>
    </vxe-modal>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {FormMixins} from "@/utils/FormMixins";
import * as api from "./api.js";
import PrintTemplate from "./Components/PrintTemplate.vue"
import PreviewPrintTemplate from "./Components/PreviewPrintTemplate.vue"

const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message} = window;

const Model = () => {
    return {
        id: null,
        name: null,
        code: null,
        model: null,
        customer: null,
        customerAddr: null,
        contactName: null,
        contactPhone: null,
        status: 0,
        canUsed: 0,
        description: null
    }
}

// 校验规则
const rules = computed(() => {
    return {
        // deviceId: [{required: true, message: "请设置设备"}],
        name: [{required: true, message: "请设置电脑名称"}],
    }
})

// 自定义校验规则
const customRules = {
    // pid: (rule, value, callback) => {
    //     if (state.model.type > 0) {
    //         if (!value) return callback(new Error("请设置客户名称"));
    //     }
    //     return true;
    // },
};

/**
 * 一开始自动获取mac地址，但是不填充，当点击获取的时候再填充
 */
function setMac() {
    state.model.mac = state.mac;
}

const printTemplate = ref()

function setTemplate() {
    printTemplate.value.show({
        title: "选择打印模板",
        options: {jsonReport: state.model.jsonReport},
        ok(result) {
            debugger
            state.model.jsonReport = result;
        }
    })
}

const previewPrintTemplate = ref()

function previewTemplate() {
    previewPrintTemplate.value.show({
        title: "预览打印模板",
        options: {jsonReport: state.model.jsonReport},
    })
}

// 表单显示
async function show(config) {
    setOptions(config);
    state.model = Model();
    state.model = {...state.model, ...state.options}
    // 初始化数据
    state.deviceList = [];
    api.GetDeviceList({}).then(({data}) => {
        state.deviceList = data || []
    })
    api.GetProgramList({}).then(({data}) => {
        state.programList = data || []
    })
    $localSocket.callMethod("GetMac")
    $localSocket.onGetMac = (mac) => {
        state.mac = mac;
        console.primaryText("获取到mac 地址: ", mac)
    }
}

// 校验表单
function beforeSubmit() {
    ELForm.value.validate(isOk => {
        isOk && submit()
    })
}

// 提交表单
async function submit() {
    isSubmitting.value = true
    console.log("submit: ", state.model)
    const body = {...state.model}
    const {success, data} = await api[state.model.id ? 'UpdateComputerInfo' : 'AddComputerInfo'](body);
    isSubmitting.value = false
    if (!success) return 0;
    $message.success("操作成功")
    submitSuccess()
}

onMounted(() => {
})
defineExpose({
    show
})
</script>


<style lang="scss" scoped>
.EditForm {

}
</style>
